<template>
	<view class="con">
		<view class="empty" v-if="isEmpty">
			<u-empty
			        mode="address"
			        icon="https://img-cdn.duobashuzi.com/xiangguijia/v1/address.png"
			>
			</u-empty>
			<view class="add_info" @click="setAddress">
				新增地址
			</view>
		</view>
		<view class="list" v-else>
			
			<view class="li_item" v-for="item in list" @click="setDefault" :data-id="item.id" :key="item.id">
				<view class="li_itemleft">
					<view class="l_add">
						<text class="add">{{item.address+item.extra_field1}}</text>
					</view>
					<view class="l_top">
						<text v-if="item.is_default==1" class="moren">默认</text>
						<text class="name">{{item.recipient}}</text>
						<text class="tel">{{item.phone_number}}</text>	
					</view>
				</view>
				<view class="li_itemright" @click="toEditAddr(item.id)">
					<image src="https://img-cdn.duobashuzi.com/xianggui/img/edit_icon.png"></image>
				</view>
				<!-- <view class="l_opt">
					<view class="opt1">
						<view class="view">
							<text :class="item.is_default==1?'select radio':'radio'">
								<text class="xcxs icon-tick"></text>	
							</text>
							<text class="text">默认地址</text>	
						</view>
					</view>
					<view class="opt2">
						<view class="view" @click.stop="toEditAddr" :data-id="item.id">
							<text class="xcx icon-edit-h"></text>
							<text class="text" >编辑</text>
						</view>
						<view class="view" @click.stop="deleteAddr" :data-id="item.id">
							<text class="xcx icon-delete"></text>
							<text class="text">删除</text>
						</view>
					</view>
				</view> -->
			</view>
			<view class="footer">
				<view class="add_info" @click="setAddress">
					+新增地址
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {list,setAddressDefault,delAddress} from "@/api/address.js"
	export default{
		data(){
			return {
				isEmpty:false,
				cart_ids:'',
				list:[]
			}
		},
		onLoad(options){
			console.log(options)
			if(options.cart_ids){
				this.cart_ids = options.cart_ids;
			}
			
		},
		onShow(){
			this.getList()
			
		},
		methods:{
			getList(){
				list({}).then(res=>{
					if(res.data.length!=0){
						this.list = res.data
						this.isEmpty = false
					}else{
						this.list = res.data
						this.isEmpty = true
						this.$store.commit("setAddress",{
							address:res.result
						})
					}
				}).catch(err=>{
					uni.showToast({
						title:err.msg,
						icon:'none'
					})
				})
			},
			setAddress(){
				if(this.cart_ids == ''){
					uni.navigateTo({
						url:"/package/address/addrSet"
					})
				}else{
					uni.navigateTo({
						url:"/package/address/addrSet?cart_ids="+this.cart_ids
					})
				}
				
			},
			toEditAddr(id){
				// let id = e.currentTarget.dataset.id
				console.log(id)
				uni.navigateTo({
					url:"/package/address/addrSet?id="+id+"&isType=1&cart_ids="+this.cart_ids
				})
			},
			setDefault(e){
				console.log('选择地址')
				let id = e.currentTarget.dataset.id;
				console.log(this.cart_ids)
				if(this.cart_ids){
					uni.redirectTo({
						url: "/package/addOrder/index?cart_ids="+this.cart_ids+"&address_id="+id
					});
				}else{
					uni.navigateTo({
						url:"/package/address/addrSet?id="+id
					})
				}
				// let openid = uni.getStorageSync("openid")||""
				
				// let shCode = uni.getStorageSync("shCode")
				// let _this = this
				// setAddressDefault({openid,id,shCode}).then(res=>{
				// 	console.log(res)
				// 	if(res.status==200){
				// 		this.list.map(function(item){
				// 			if(id==item.id){
				// 				// uni.setStorageSync("address",item)
				// 				_this.$store.commit("setAddress",{
				// 					address:item
				// 				})
				// 			}
				// 		})
				// 		this.getList()
				// 	}
				// }).catch(err=>{
				// 	uni.showToast({
				// 		title:err.msg,
				// 		icon:'none'
				// 	})
				// })
			},
			deleteAddr(e){
				let id = e.currentTarget.dataset.id
				let _this = this
				uni.showModal({
					title:"提示",
					content:"是否删除",
					success(res){
						if(res.confirm){
							delAddress({id:id}).then(res=>{
								if(res.code==200){
									_this.getList()
								}
							}).catch(err=>{
								uni.showToast({
									title:err.msg,
									icon:'none'
								})
							})
							
						}
					}
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		width: 100%;
		height: 100vh;
		background-color: #f2f2f2;
	}
	.con{
		width: 100%;
		min-height: 100vh;
		background: #f2f2f2;
	}
	@mixin ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	 .xcx{
		display: inline-block;
		background-position: 50%;
		margin-right: 6px;
		background-repeat: no-repeat;
		background-size: 100% auto;
		position: relative;
	}
	.empty{
		padding: 30px 0;
		.add_info{
			width: 200rpx;
			height: 80rpx;
			margin: 20rpx auto;
			text-align: center;
			line-height: 80rpx;
			border: 1px solid #333;
			color: #333;
			border-radius: 10rpx;
		}
	}
	.list{
		padding: 0;
		padding-top: 10px;
		.li_item{
			width: 90%;
			padding: 10px 2.5%;
			border-radius: 5px;
			margin: 0 auto;
			margin-bottom: 12px;
			// padding: 15px 0 0;
			background: #fff;
			border-radius: 10px;
			display: flex;
			.li_itemleft{
				width: 90%;
				
				.l_top{
					color: #969799;
					font-size: 12px;
					.name{
						padding: 0 5px;
					}
					.moren{
						background: #ff4444;
						color: #fff;
						padding: 0 5px;
						border-radius: 10px;
					}
				}
				.l_add{
					display: flex;
					align-items: center;
					padding-bottom: 10px;
					.add{
						// max-width: 286px;
						display: inline-block;
						color: #323233;
						font-size: 14px;
						// @include ellipsis;
					}
				}
			}
			.li_itemright{
				width: 10%;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 18px;
					height:18px;
				}
			}
			
			
		}
	}
	.footer{
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 10px 0;
		background: #fff;
		border-top: 1px solid #eee;
		align-items: center;
		align-content: center;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1;
		.add_info{
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 40px;
			margin: 0 auto;
			font-size: 16px;
			width: 90%;
			background-color: #ff4444;
			border-radius: 20px;
		}
	}
	.xcxs{
		display: inline-block;
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% auto;
		position: relative;
	}
	.icon-tick {
	    width: 12px;
	    height: 8px;
	    background-image: url(https://img-cdn.duobashuzi.com/xianggui/img/select.png);
	}
</style>